<template>
  <div>
    <Card
      size="small"
      :bordered="false"
      class="w-4/4 w-full h-full !mt-0 !rounded-lg !p-6px min-h-1/1 h-full max-h-1/1"
    >
      <template #title>
        <div class="flex items-center cursor-pointer" @click="goRoutes(cardData.title)">
          <div>{{ cardData.title }}</div>
          <Icon icon="material-symbols:arrow-right-alt" v-if="cardData.go" />
        </div>
      </template>
      <template #extra>
        <Button
          class="mr-2 !text-neutral-400"
          size="small"
          v-if="cardData.addText !== null"
          type="dashed"
          @click="cardClick(cardData.addText)"
          >{{ cardData.addText }}</Button
        >
        <Icon :icon="cardData.icon" v-if="cardData.icon !== null" />
      </template>
      <div class="flex justify-center" v-if="cardData.type === 'number'">
        <span class="font-bold text-2xl" v-if="!cardData.unit.flag">{{ cardData.value }}</span>
        <Tooltip placement="top">
          <template #title>
            <span>{{ cardData.unit.tip }}</span>
          </template>
          <div v-if="cardData.unit.flag">
            <span class="font-bold text-xl">
              {{ cardData.value + ' ' }}
            </span>
            <span class="text-lg">{{ cardData.unit.text }}</span>
          </div>
        </Tooltip>
      </div>
      <div v-if="cardData.type === 'Array'" class="h-60px">
        <Tag class="text-base" v-for="(item, index) in cardData.value" :key="index">{{
          item.name
        }}</Tag>
      </div>
      <div v-if="cardData.type === 'iconArray'" class="h-60px">
        <Tag class="text-base p-3" v-for="(item, index) in cardData.value" :key="index">
          <template #icon>
            <Icon :icon="item.icon" />
          </template>
          {{ item.name }}
        </Tag>
      </div>
      <div v-if="cardData.type === 'version'" class="flex justify-center">
        <div class="w-1/2">
          <div>当前版本：</div>
          <div>{{ cardData.value.version }}</div>
        </div>
        <div class="w-1/2">
          <div>已经更新到最新版本：</div>
          <div>{{ cardData.value.version }}</div>
        </div>
      </div>
    </Card>
    <EditModal @register="register" :minHeight="100" />
  </div>
</template>

<script setup lang="ts">
  import { Card, Button, Tooltip, Tag } from 'ant-design-vue';
  import Icon from '/@/components/Icon';
  import { useModal } from '/@/components/Modal';
  import EditModal from './EditModal.vue';
  import { useGo } from '/@/hooks/web/usePage';
  const go = useGo();
  const [register, { openModal }] = useModal();

  const props = defineProps({
    cardData: {
      type: Object,
      default: () => ({}),
    },
  });

  function cardClick(value) {
    if (value === '编辑') {
      openModal(true, {
        title: value,
        arr: props.cardData.value,
      });
    } else if (value === '添加租户') {
      go({
        name: 'Tenant',
        params: {
          key: value,
        },
      });
    } else if (value === '添加配置') {
      go({
        name: 'tbTenantProfiles',
        params: {
          key: value,
        },
      });
    }
  }
  function goRoutes(value) {
    if (value === '租户') {
      go({
        name: 'Tenant',
        params: {
          key: value,
        },
      });
    } else if (value === '租户配置') {
      go({
        name: 'tbTenantProfiles',
        params: {
          key: value,
        },
      });
    }
  }
</script>
